<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>今天吃什么？- 中华美食推荐</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <!-- 头部 -->
        <header class="header">
            <h1 class="title">今天吃什么？</h1>
            <p class="subtitle">发现中华美食的无穷魅力</p>
        </header>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <!-- 推荐按钮区域 -->
            <section class="recommendation-section">
                <button id="recommendBtn" class="recommend-btn">
                    <span class="btn-text">给我推荐一道菜</span>
                    <span class="btn-icon">🎲</span>
                </button>
            </section>

            <!-- 菜品展示区域 -->
            <section class="dish-display" id="dishDisplay">
                <div class="dish-card">
                    <div class="dish-image">
                        <div class="placeholder-image">🍜</div>
                    </div>
                    <div class="dish-info">
                        <h2 class="dish-name">点击按钮开始探索美食之旅</h2>
                        <div class="dish-tags">
                            <span class="tag">中华料理</span>
                        </div>
                        <p class="dish-description">
                            中华美食博大精深，八大菜系各有特色。让我们一起发现今天的美味吧！
                        </p>
                        <div class="dish-details">
                            <div class="detail-item">
                                <span class="detail-label">菜系：</span>
                                <span class="detail-value">中华料理</span>
                            </div>
                            <div class="detail-item">
                                <span class="detail-label">口味：</span>
                                <span class="detail-value">丰富多样</span>
                            </div>
                            <div class="detail-item">
                                <span class="detail-label">难度：</span>
                                <span class="detail-value">因菜而异</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 菜系分类 -->
            <section class="cuisine-categories">
                <h3 class="section-title">🍽️ 选择分类</h3>
                <div class="category-grid">
                    <button class="category-btn active" data-cuisine="all">
                        <span class="category-icon">🎲</span>
                        <span class="category-name">随机推荐</span>
                    </button>
                    <button class="category-btn" data-cuisine="米饭类">
                        <span class="category-icon">🍚</span>
                        <span class="category-name">米饭类</span>
                    </button>
                    <button class="category-btn" data-cuisine="面食类">
                        <span class="category-icon">🍜</span>
                        <span class="category-name">面食类</span>
                    </button>
                    <button class="category-btn" data-cuisine="中餐小炒">
                        <span class="category-icon">🥘</span>
                        <span class="category-name">中餐小炒</span>
                    </button>
                    <button class="category-btn" data-cuisine="轻食健康碗">
                        <span class="category-icon">🥗</span>
                        <span class="category-name">轻食健康</span>
                    </button>
                    <button class="category-btn" data-cuisine="饺子云吞包子">
                        <span class="category-icon">🥟</span>
                        <span class="category-name">饺子包子</span>
                    </button>
                    <button class="category-btn" data-cuisine="粥早午餐">
                        <span class="category-icon">🥣</span>
                        <span class="category-name">粥早午餐</span>
                    </button>
                    <button class="category-btn" data-cuisine="锅仔汤煲">
                        <span class="category-icon">🍲</span>
                        <span class="category-name">锅仔汤煲</span>
                    </button>
                    <button class="category-btn" data-cuisine="麻辣烫冒菜香锅">
                        <span class="category-icon">🌶️</span>
                        <span class="category-name">麻辣烫</span>
                    </button>
                    <button class="category-btn" data-cuisine="烧烤炸物">
                        <span class="category-icon">🍖</span>
                        <span class="category-name">烧烤炸物</span>
                    </button>
                    <button class="category-btn" data-cuisine="汉堡西式快餐">
                        <span class="category-icon">🍔</span>
                        <span class="category-name">西式快餐</span>
                    </button>
                    <button class="category-btn" data-cuisine="日韩东南亚">
                        <span class="category-icon">🍱</span>
                        <span class="category-name">日韩料理</span>
                    </button>
                    <button class="category-btn" data-cuisine="小吃甜品">
                        <span class="category-icon">🧁</span>
                        <span class="category-name">小吃甜品</span>
                    </button>
                    <button class="category-btn" data-cuisine="DIY套餐">
                        <span class="category-icon">🍱</span>
                        <span class="category-name">DIY套餐</span>
                    </button>
                </div>
            </section>

            <!-- 今日推荐 -->
            <section class="daily-recommendations">
                <h3 class="section-title">今日特别推荐</h3>
                <div class="recommendation-grid" id="dailyRecommendations">
                    <!-- 动态生成推荐内容 -->
                </div>
            </section>
        </main>

        <!-- 底部 -->
        <footer class="footer">
            <p>&copy; 2024 今天吃什么 - 探索中华美食文化</p>
        </footer>
    </div>

    <!-- 加载动画 -->
    <div class="loading-overlay" id="loadingOverlay">
        <div class="loading-spinner">
            <div class="spinner"></div>
            <p>正在为您寻找美味...</p>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>